<!-- Created by henian.xu on 2018/11/11. -->

<template>
    <ul class="breadcrumbs">
        <li 
            v-for="item in data" 
            :key="item.id">
            <span>{{ item.name }}</span>
        </li>
    </ul>
</template>

<script>
export default {
    name: 'Breadcrumbs',
    data() {
        return {};
    },
    props: {
        data: {
            type: Array,
            default() {
                return [];
            },
        },
    },
};
</script>

<style lang="scss">
@import '~/assets/style/_index.scss';

.breadcrumbs {
    @include clearfix;
    list-style: none;
    padding-left: 0;
    border-bottom: 1px solid $color-border;

    > li {
        float: left;
        cursor: pointer;

        &:hover,
        &.action {
            color: $color-main;
        }

        > span {
            display: inline-block;
            padding: $padding $padding-small;
        }

        + li {
            &:before {
                content: '/';
                //padding: 0 $padding-small;
            }
        }
    }
}
</style>
